import React from 'react';
import { Table, Pagination, Modal, DatePicker } from 'antd';
import styles from './Forms.less';
import moment from 'moment';

const UserForms = (props) => {

    const {userForms, getUserForms} = props;
    console.log(props);
    const Header = (props) => {
        const {date} = props;
        const { MonthPicker } = DatePicker;
        return (
            <div >
                <MonthPicker
                    placeholder={date}
                    defaultPickerValue={moment(date, 'YYYY-MM')}
                    onChange={(date, dateString) => {
                        getUserForms({
                            ...userForms,
                            date: dateString,
                        });
                    }}
                />
            </div>
        );
    };

    const columns = [
        {
            title: '学习名称',
            dataIndex: 'remark',
        },
        {
            title: '学习开始时间',
            dataIndex: 'week_begin',
        },
        {
            title: '学习结束时间',
            dataIndex: 'week_end',
        },
        {
            title: '学习时间',
            dataIndex: 'create_date',
            render: (text, record) => {
                const date1=moment(record.week_begin);
                const date2=moment(record.week_end);
                const date3=date2.diff(date1,'minute') + 1;//计算相差的分钟数
                return (
                    <div>{date3}分钟</div>
                );
            },
        },
    ];

    return(
        <div className={styles.container}>
            <Header date={userForms.date} />
            <Table rowKey={(record) => {
                return record.create_date;
            }}
            columns={columns}
            size="small"
            pagination={false}
            dataSource={userForms.records} />
            <Pagination current={userForms.pageIndex} showTotal={()=> `共计 ${userForms.total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={userForms.total}
                onChange={pages => {
                    getUserForms({
                        ...userForms,
                        pageIndex: pages,
                    });
                }}/>
        </div>
    );
};


export default UserForms;